<template>
   <div>
      <el-breadcrumb separator="/">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item><a href="javascript:;">订单管理</a></el-breadcrumb-item>
         <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="hengxian"></div>

      <el-row>
         <el-col :span="2">
            <el-select v-model="time" size="mini" placeholder="请选择">
               <el-option label="支付时间" value="pay_time"></el-option>
               <el-option label="发货时间" value="picking_time"></el-option>
               <el-option label="配货时间" value="shipping_time"></el-option>
               <el-option label="完成时间" value="finish_time"></el-option>
               <el-option label="下单时间" value="created_at"></el-option>
            </el-select>
         </el-col>
         <el-col :span="6">
            <div class="block">
               <el-date-picker v-model="date" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" size="mini"
                               @change="handleChangeDate(date)"
                               range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
               </el-date-picker>
            </div>
         </el-col>
         <el-col :span="5">
            <div>
               <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select" size="mini">
                  <el-select v-model="cate" slot="prepend" placeholder="请选择">
                     <el-option label="ID" value="id"></el-option>
                     <el-option label="订单编号" value="order_code"></el-option>
                     <el-option label="用户名" value="name"></el-option>
                     <el-option label="手机号" value="phone"></el-option>
                     <el-option label="快递单号" value="express_code"></el-option>
                  </el-select>
                  <el-button slot="append" @click="handleSearch" icon="el-icon-search"></el-button>
               </el-input>
            </div>
         </el-col>
      </el-row>

      <el-table :data="orders" tooltip-effect="dark" style="width: 100%" border v-loading="loading">
         <el-table-column prop="id" label="ID"></el-table-column>
         <el-table-column prop="order_code" label="订单编号" width="160"></el-table-column>
         <el-table-column prop="user_name" label="用户"></el-table-column>
         <el-table-column prop="phone" label="手机号" width="115"></el-table-column>
         <el-table-column prop="pay_type" label="支付类型">
            <template slot-scope="scope">{{pay_type[scope.row.pay_type]}}</template>
         </el-table-column>
         <el-table-column prop="total_price" label="支付金额">
            <template slot-scope="scope">
               <el-tooltip placement="top">
                  <div slot="content">总金额：{{scope.row.total_price}}<br/>优惠：{{scope.row.free_price}}</div>
                  <span>{{scope.row.pay_price}}</span>
               </el-tooltip>
            </template>
         </el-table-column>
         <el-table-column prop="trade_code" label="交易号">
            <template slot-scope="scope">
               <el-tooltip class="item" effect="light" :content="scope.row.trade_code" placement="top">
                  <el-tag size="mini" v-if="scope.row.trade_code">查看</el-tag>
               </el-tooltip>
            </template>
         </el-table-column>
         <el-table-column prop="express_code" label="快递单号" width="150">
            <template slot-scope="scope">
               <el-tooltip class="item" effect="dark" :content="scope.row.express_name" placement="top">
                  <span>{{scope.row.express_code}}</span>
               </el-tooltip>
               <el-tooltip class="item" effect="dark" content="编辑快递" placement="top" style="float: right;">
                  <i class="el-icon-edit" @click="handleEdit(scope.$index,scope.row)"></i>
               </el-tooltip>
            </template>
         </el-table-column>
         <el-table-column prop="express_money" label="运费" width="65"></el-table-column>
         <el-table-column prop="status" label="收货地址">
            <template slot-scope="scope">
               <el-tag size="mini" @click="handleShowAddress(scope.$index,scope.row)">查看</el-tag>
            </template>
         </el-table-column>
         <el-table-column prop="status" label="收货状态">
            <template slot-scope="scope">
               <el-tag :type="type[scope.row.status]" size="mini">{{order_status[scope.row.status]}}</el-tag>
            </template>
         </el-table-column>
         <el-table-column prop="pay_time" label="支付时间" width="105">
            <template slot-scope="scope" v-if="scope.row.pay_time">
               <el-popover trigger="hover" placement="top">{{scope.row.pay_time}}
                  <div slot="reference" class="name-wrapper">{{scope.row.pay_time|edit_date}}</div>
               </el-popover>
            </template>
         </el-table-column>
         <el-table-column prop="picking_time" label="发货时间" width="105">
            <template slot-scope="scope" v-if="scope.row.picking_time">
               <el-popover trigger="hover" placement="top">{{scope.row.picking_time}}
                  <div slot="reference" class="name-wrapper">{{scope.row.picking_time|edit_date}}</div>
               </el-popover>
            </template>
         </el-table-column>
         <el-table-column prop="shipping_time" label="配送时间" width="105">
            <template slot-scope="scope" v-if="scope.row.shipping_time">
               <el-popover trigger="hover" placement="top">{{scope.row.shipping_time}}
                  <div slot="reference" class="name-wrapper">{{scope.row.shipping_time|edit_date}}</div>
               </el-popover>
            </template>
         </el-table-column>
         <el-table-column prop="finish_time" label="完成时间" width="105">
            <template slot-scope="scope" v-if="scope.row.finish_time">
               <el-popover trigger="hover" placement="top">{{scope.row.finish_time}}
                  <div slot="reference" class="name-wrapper">{{scope.row.finish_time|edit_date}}</div>
               </el-popover>
            </template>
         </el-table-column>
         <el-table-column prop="created_at" label="下单时间" width="105">
            <template slot-scope="scope" v-if="scope.row.created_at">
               <el-popover trigger="hover" placement="top">{{scope.row.created_at}}
                  <div slot="reference" class="name-wrapper">{{scope.row.created_at|edit_date}}</div>
               </el-popover>
            </template>
         </el-table-column>
         <el-table-column label="操作" width="65">
            <template slot-scope="scope">
               <el-tooltip class="item" effect="dark" content="查看详情" placement="top">
                  <router-link :to="{name:'orders_show',params: { id: scope.row.id }}">
                     <i class="el-icon-view"></i>
                  </router-link>
               </el-tooltip>
               <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <i class="el-icon-delete" @click="handleDelete(scope.$index,scope.row)"></i>
               </el-tooltip>
            </template>
         </el-table-column>
      </el-table>

      <!--分页-->
      <div class="page">
         <span class="total">共 {{page.total}} 条数据</span>
         <el-pagination background :total="page.total" :page-size="page.size" @current-change="handleCurrentChange"
                        :current-page.sync="page.currentPage" layout="prev, pager, next">
         </el-pagination>
      </div>

      <!--编辑快递信息-->
      <el-dialog title="编辑快递信息" :visible.sync="dialogTableEdit" @close="closeDialog">
         <el-form :model="order" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="选择快递" prop="express_id">
               <el-select v-model="order.express_id" placeholder="请选择" size="small">
                  <el-option :value="0" label="选择快递"></el-option>
                  <el-option v-for="item in expresses" :key="item.id" :label="item.name"
                             :value="item.id"></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="快递单号" prop="express_code">
               <el-input v-model="order.express_code" size="small"></el-input>
            </el-form-item>
            <el-form-item label="快递运费" prop="express_money">
               <el-input v-model="order.express_money" size="small"></el-input>
            </el-form-item>
            <el-form-item>
               <el-button type="primary" size="mini" @click="updateForm('ruleForm')">更新</el-button>
               <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
         </el-form>
      </el-dialog>

      <!--收货地址-->
      <el-dialog title="收货地址" :visible.sync="dialogAddress" @close="closeDialog">
         <el-form :model="order_address" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="name">
               <el-input v-model="order_address.name" size="small"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="tel">
               <el-input v-model="order_address.tel" size="small" maxlength="11"></el-input>
            </el-form-item>
            <el-form-item label="省份" prop="province">
               <el-input v-model="order_address.province" size="small"></el-input>
            </el-form-item>
            <el-form-item label="城市" prop="city">
               <el-input v-model="order_address.city" size="small"></el-input>
            </el-form-item>
            <el-form-item label="县/区" prop="area">
               <el-input v-model="order_address.area" size="small"></el-input>
            </el-form-item>
            <el-form-item label="街道" prop="detail">
               <el-input type="textarea" v-model="order_address.detail" size="small"></el-input>
            </el-form-item>
            <el-form-item>
               <el-button type="primary" size="mini" @click="updateOrderAddress('ruleForm')">更新</el-button>
               <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
         </el-form>
      </el-dialog>
   </div>
</template>

<script>
   export default {
      name: "Home",
      data() {
         return {
            loading: false,
            dialogTableEdit: false,
            dialogAddress: false,
            type: ['warning', 'danger', 'info', '', 'success'],
            order: {},
            expresses: [],
            orders: [],
            pay_type: [],
            order_status: [],
            order_address: {},
            time: '',
            date: [],
            keyword: '',
            cate: '',
            page: {
               total: 0,  //总数
               size: 0,  //每页显示数
               currentPage: 1,
            },
            rules: {
               express_code: [
                  // {required: true, message: '快递单号不能为空'},
               ]
            }
         }
      },
      created() {
         this.init();
      },
      filters: {
         //截取时间
         edit_date: function (val) {
            return val.substring(0, 10);
         }
      },
      methods: {
         //分页--获取当前页
         handleCurrentChange(val) {
            this.page.currentPage = val;
            this.init();
         },
         //按时间搜索
         handleChangeDate(val) {
            if (val != null) {
               this.date = val;
               this.init();
            }
         },
         //关键字搜索
         handleSearch() {
            this.init();
         },
         init() {
            this.loading = true;
            const user_id = this.$route.params.user_id || '';
            axios.get(`/admin/shop/orders?page=${this.page.currentPage}&time=${this.time}&date=${this.date}
            &cate=${this.cate}&keyword=${this.keyword}&user_id=${user_id}`)
               .then((res) => {
                  // console.log(res.data);
                  this.orders = res.data.orders.data;
                  this.page.total = res.data.orders.total;
                  this.page.size = res.data.orders.per_page;
                  this.pay_type = res.data.payType;   //支付方式
                  this.order_status = res.data.orderStatus;   //订单状态
                  this.loading = false;
               });
         },
         //关闭模态框,先清空验证再清除表单
         closeDialog() {
            this.$refs.ruleForm.clearValidate();
            this.$refs.ruleForm.resetFields();
            this.order = {};  //清空表单值
         },
         //收货地址
         handleShowAddress(index, row) {
            axios.get(`/admin/shop/orders/order_address/${row.id}`)
               .then((res) => {
                  // console.log(res.data);
                  this.dialogAddress = true;
                  this.order_address = res.data;
               })
         },
         //更新收货地址
         updateOrderAddress(formName) {
            this.$refs[formName].validate((valid) => {
               if (valid) {
                  axios.patch(`/admin/shop/orders/edit_address/${this.order_address.order_id}`, this.order_address)
                     .then((res) => {
                        this.$message({
                           showClose: true,
                           message: '更新收货地址成功',
                           type: 'success'
                        });
                        this.dialogAddress = false;
                        this.init();
                     })
               } else {
                  console.log('error submit!!');
                  return false;
               }
            });
         },
         //编辑
         handleEdit(index, row) {
            //获取快递
            axios.get(`/admin/shop/expresses`)
               .then((res) => {
                  this.expresses = res.data.data;
               });
            axios.get(`/admin/shop/orders/${row.id}/edit`)
               .then((res) => {
                  this.dialogTableEdit = true;
                  this.order = res.data;
               })
         },
         //更新
         updateForm(formName) {
            this.$refs[formName].validate((valid) => {
               if (valid) {
                  axios.put(`/admin/shop/orders/${this.order.id}`, this.order)
                     .then((res) => {
                        this.$message({
                           showClose: true,
                           message: '编辑分类成功',
                           type: 'success'
                        });
                        this.dialogTableEdit = false;
                        this.init();
                     })
               } else {
                  console.log('error submit!!');
                  return false;
               }
            });
         },
         //重置表单
         resetForm(formName) {
            this.$refs[formName].resetFields();
         },
         //删除
         handleDelete(index, row) {
            this.$confirm('确认删除该订单并同时删除订单详情?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
            }).then(() => {
               axios.delete(`/admin/shop/orders/${row.id}`)
                  .then((res) => {
                     this.orders.splice(index, 1);
                     this.$message({
                        type: 'success',
                        message: '删除成功!'
                     });
                     this.init();
                  });
            }).catch(() => {
               this.$message({
                  type: 'warning',
                  message: '已取消删除'
               });
            });
         },
      }
   }
</script>

<style scoped>
   .el-icon-view {
      cursor: pointer;
      color: #00a0e9;
   }

   .el-form-item {
      margin-bottom: 0;
   }
</style>